<!--
 * @Descripttion:
 * @Copyright: 武汉一一零七科技有限公司©版权所有
 * @Link: www.wo-shop.net
 * @Contact: QQ:2487937004
 * @LastEditors: cbing
 * @LastEditTime: 2020-08-01 06:54:10
-->
<template>
    <div >

            <div class="goodsInfo">
					<div class="goodsTop" @click="toGoodsDetali(propObj.goodsinfo.id)">
						<div class="goodsPic" >
							<image :src="propObj.goodsinfo.thumb_url" mode="widthFix"></image>
						</div>
						<div class="aboutGoods">
                            <h2 class="goodsTit">{{propObj.goodsinfo.goods_name}}</h2>
							<div class="price"> <span class="span u-font-bold">A${{propObj.goodsinfo.zs_shop_price}}</span><i class="i">价格：¥{{propObj.goodsinfo.zs_market_price}}</i> </div>
							<div class="store">
                                  <span>已售数量: {{propObj.goodsinfo.salenum}}</span>
                                <span>库存: {{propObj.pronum}}</span>
                            </div>
							<div class="choice u-m-t-10">选择:
                                <block v-for="item in getSelected" :key="item.id">
                                   <span class="box">{{item.attr_name}}:{{item.attr_value}}</span>
                                </block>
                                 </div>


						</div>

					</div>
					<scroll-view scroll-y style="min-height: 540upx;">
						<div class="goodsAttribute" v-for="(item,index) in getGoodsAttrs" :key="index">

							<div class="attribute">
								<div  v-for="(attribute,index2) in item" :key="attribute.id" :class="{active:attribute.check=='true'}"
								 >
                                    <span>{{item[0].attr_name}}:</span>
									<p class="attributeWrap">
                                        <span class="attributeItem" @click="setAttar(index,index2)" :class="{active:attribute.check=='true'}">{{attribute.attr_value}}</span>
                                        </p>
								</div>
							</div>
						</div>

					</scroll-view>
					<div class="apply" @click.stop="updateAttr">加入购物车</div>
				</div>

    </div>
</template>

<script>
	export default {
            data(){
               return{
                attrIndex:0,
                selectList:[],
                currentGoodsAttar:{},

               }
            },
     props:{
        propObj:{
            type:Object,
            default:{}
        },
         GoodsAttrs:{
            type:Array,
            default:[]
        }
     },
     computed: {

        getGoodsAttrs:{
            // 默认选中每个属性的第一项
            get(){
                this.GoodsAttrs.map((res,index)=>{
                    res[0].check= "true"
                   return {title:res[index]?res[index].attr_name:'',list:res}
                })
                return this.GoodsAttrs
            }
        },
        // 实时获取动态变动的属性
        getSelected(){
            let arr = [].concat.apply([],this.GoodsAttrs);
            return arr.filter(res=>res.check=="true")
        }
     },
   methods:{
         closeAttrPopUp(){
              this.fresh = false
         },
         		toGoodsDetali(goodsid) {
			uni.navigateTo({
				url: '/pagesC/goods/goodsDetails?id=' + goodsid,
				animationType: 'slide-in-right',
				animationDuration: 300
			});
        },
        // 选择属性
        setAttar(index,index2){
            this.getGoodsAttrs[index].map(res=>res.check="false")
            this.$set(this.getGoodsAttrs[index][index2],"check","true")
        },
    //    确认加入到购物车
        updateAttr(){
            let arr = this.getSelected.map(res=>res.id)
            let data ={
                 goods_id:this.propObj.goodsinfo.id,
                goods_attr:arr.join(','),
                fangshi: 1,
                num:1
             }
            this.$http.getaddcart(data).then(res => {
                if(res.status==200){
                    this.$toast('加入购物车成功')
                    uni.$emit('addCartYes')
                }else{
                   setTimeout(() => {
                         this.$toast(res.mess)
                   }, 1500);

                }
            })
        }
          }

        }

    </script>
    <style lang="scss" scoped>
   	.goodsInfo {
       color: #333;
			.goodsTop {
				padding: 30upx 20upx 20upx 20upx;
				display: flex;
				border-bottom: 1upx solid #F2F2F2;

				.goodsPic {
					flex: 0 0 180upx;
					height: 180upx;

					image {
						width: 180upx;
						height: 180upx;
                        border-radius: 12upx;
					}

				}

				.aboutGoods {
					flex: 1;
					margin-left: 25upx;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.price {
						display: flex;
						font-size: 20upx;
						align-items: center;

						span {
							font-weight: 500;
							color: #ff8332;
							font-size: 36upx;
							display:inline-block;
							margin-right:10upx;
						}

						i {
							font-size: 20upx;
							color: #999;
						}
					}

					.store {
						font-size: 22upx;
						color: #999;

					}

					.choice {
						font-size: 22upx;
						color: #333;
                        .box{
                            margin-left: 15upx;
                        }
					}
				}

				.cancel {
					font-size: 40upx;
				}
			}
.goodsTit{
    line-height: 1.2;
    overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 30upx;
}
			.goodsAttribute {
				padding: 0 40upx 0 22upx;

				.attributeTitle {
					font-size: 24upx;
					color: #333;

				}

				.attribute {

                    .attributeWrap{
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                    }
					.attributeItem {
						display: inline-block;
						margin-bottom: 27upx;
						display: flex;
						align-items: center;
						padding:2upx 8upx;
						border: 1upx solid #999999;
						margin-right: 20upx;
						border-radius: 10upx;

						&.active {
							border: 1upx solid #ff8332;
							background: rgba(255, 243, 248, 1);


								color: #ff8332;

						}

						image {
							width: 50upx;
							height: 50upx;
							margin-right: 15upx;

						}

						span {
							font-size: 24upx;
							color: #333;
							max-width: 600upx;

						}
					}
				}
			}

			.calculator {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 120upx;
				padding-left: 34upx;
				padding-right: 55upx;
				border-top: 1upx solid #F2F2F2;
				border-bottom: 1upx solid #F2F2F2;

				.calculatorBox {
					width: 200upx;
					height: 60upx;
					border: 1upx solid #F2F2F2;
					border-radius: 10upx;
					display: flex;
					align-items: center;

					.opreation {
						width: 60upx;
						text-align: center;

						&.dec {
							border-right: 1upx solid #f2f2f2;
						}

						&.add {
							border-left: 1upx solid #f2f2f2;
						}
					}

					.input {
						flex: 1;
						text-align: center;
					}
				}
			}

			.apply {
				height: 98upx;
				color: #fff;
				background: rgb(250, 63, 63);
				text-align: center;
				line-height: 98upx;
				font-size: 28upx;
			}
		}
    </style>
